<template>
    <!--基本信息  -->
    <div class="laonone">

        <el-descriptions class="margin-top" title="借款需求" :column="3" :size="size" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">放款人信息</div>
                </template>
                <el-input v-model="htLenders" class="inputDeep" />
            </el-descriptions-item>


            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">开户机构</div>
                </template>
                <el-input v-model="htAccountbody" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">付款账户</div>
                </template>
                <el-input v-model="htPaymentaccount" class="inputDeep" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同编号</div>
                </template>
                <el-select v-model="value" class="inputDeep" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :value="item.value" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">签署日期</div>
                </template>
                <el-input v-model="htSignndate" class="inputDeep" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">客户名称</div>
                </template>
                <el-input v-model="htCustomer" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">签署地址</div>
                </template>
                <el-input v-model="htSignnadderss" class="inputDeep" />
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :column="3" :size="size" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">借款金额</div>
                </template>
                <el-input v-model="htAmounmoney" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">产品名称</div>
                </template>
                <el-input v-model="htProductname" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">还款方式</div>
                </template>
                <el-select v-model="value" class="inputDeep" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :value="item.value" />
                </el-select>
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">期限类型</div>
                </template>
                <el-input v-model="htTermtype" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">期限</div>
                </template>
                <el-input v-model="htTerm" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">月利率(%)</div>
                </template>
                <el-input v-model="htMonthrates" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">手续费(%)</div>
                </template>
                <el-input v-model="htPremiumrates" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">违约利率(%)</div>
                </template>
                <el-input v-model="htBreachrates" class="inputDeep" />
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">借款主体</div>
                </template>
                <el-input v-model="htAmounbody" class="inputDeep" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-items">借款用途</div>
                </template>
                <el-input v-model="htAmounusage" class="inputDeep" placeholder="请输入内容" />
            </el-descriptions-item>
        </el-descriptions>

        <div class="trtitle">银行账户信息
            <el-button type="primary" plain class="xinjian">新建</el-button>
        </div>
        <div class="yinhangzhanghu">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="序号" width="80">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="开户机构">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htProvincebranch" />
                    </template>
                </el-table-column>
                <el-table-column label="收款账户账号">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htProvincebranch" />
                    </template>
                </el-table-column>
                <el-table-column label="所属省分行">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htProvincebranch" />
                    </template>
                </el-table-column>
                <el-table-column label="所属市分行">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htProvincebranch" />
                    </template>
                </el-table-column>
                <el-table-column label="所属支行">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htProvincebranch" />
                    </template>
                </el-table-column>
                <el-table-column prop="pos" label="操作" width="60px">
                    
                    <template #default="scope">
                        <el-button type="danger" round @click="shanchu(scope.row.htContractid)"><el-icon><DeleteFilled /></el-icon></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>


        <div class="trtitle">合同信息证明信息
            <el-button type="primary" plain class="xinjians">新建</el-button>
        </div>
        <div class="yinhangzhanghus">
            <el-table :data="hrList" border style="width: 100%">
                <el-table-column lahrListbel="序号" width="80">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合同名称">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htContractname" />
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htFilesize" />
                    </template>
                </el-table-column>
                <el-table-column label="文件大小">
                    <template #default="scope">
                        <el-input style="width:100%;height: 100%;outline: none;border:0px;" type="text" placeholder="请输入"
                            :value="scope.row.htRemark" />
                    </template>
                </el-table-column>
                <el-table-column prop="pos" label="操作" width="60px">
                    <!-- <el-icon @click="del(id)">
                        <DeleteFilled />
                    </el-icon> -->
                    <template #default="scope">
                        <el-button type="danger" round @click="del(scope.row.htContractid)"><el-icon><DeleteFilled /></el-icon></el-button>
                    </template>
                </el-table-column>
            </el-table>


        </div>
        <div class="kuang">
            <div class="fanhui" @click="fanhui">
                <el-icon>
                    <ArrowLeft />
                </el-icon>返回
            </div>
            <el-button type="primary" plain class="anniu">保存</el-button>
            <el-button type="primary" class="anniu">提交</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import serviceAxios from '@/apis'
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'// 手动导入样式
const value = ref('')
var router = useRouter();
var hrList = ref([])
var tableData = ref([])
//借款合同
var jiekuanlist = ({})
var htLenders = ref({})
var htAccountbody = ref({})
var htPaymentaccount = ref({})
var htSignndate = ref({})
var htCustomer = ref({})
var htSignnadderss = ref({})
var htAmounmoney = ref({})
var htProductname = ref({})
var htTermtype = ref({})
var htTerm = ref({})
var htMonthrates = ref({})
var htPremiumrates = ref({})
var htBreachrates = ref({})
var htAmounbody = ref({})
var htAmounusage = ref({})
//
// 删除
var htContractidList = ref([])

// 返回
var fanhui = () => {
    router.push('/home/loan/loana')
}

//银行账户信息
serviceAxios.zyf.htxinx_htBankinfo().then((res) => {
    // console.log(res.data.data, '11111111111111111');
    tableData.value = res.data.data

})
//合同证明信息
serviceAxios.zyf.htxinx_htProof().then((res) => {
    console.log(res.data.data, '11111111111111111');
    hrList.value = res.data.data

})
//表格页面渲染
serviceAxios.zyf.htxinx_htContractid().then((res) => {
    // console.log(res.data, '111111111111111112222');
    jiekuanlist.value = JSON.parse(JSON.stringify(res.data))
    htLenders.value = jiekuanlist.value.htLenders
    htAccountbody.value = jiekuanlist.value.htAccountbody
    htPaymentaccount.value = jiekuanlist.value.htPaymentaccount
    htSignndate.value = jiekuanlist.value.htSignndate
    htCustomer.value = jiekuanlist.value.htCustomer
    htSignnadderss.value = jiekuanlist.value.htSignnadderss
    htAmounmoney.value = jiekuanlist.value.htAmounmoney
    htProductname.value = jiekuanlist.value.htProductname
    htTermtype.value = jiekuanlist.value.htTermtype
    htTerm.value = jiekuanlist.value.htTerm
    htMonthrates.value = jiekuanlist.value.htMonthrates
    htPremiumrates.value = jiekuanlist.value.htPremiumrates
    htBreachrates.value = jiekuanlist.value.htBreachrates
    htAmounbody.value = jiekuanlist.value.htBreachrates
    htAmounusage.value = jiekuanlist.value.htAmounusage
})

const options = [
    {
        value: '年',

    },
    {
        value: '月',

    },
    {
        value: '日',

    },
]
const optionsr = [
    {
        value: '个人贷款',

    },
    {
        value: '个体工商户',

    },
    {
        value: '农村专业合作组织',

    },
]
// 删除合同
var del = (ids) => {

    // console.log(id, '4444444444444');
    serviceAxios.zyf.htxinx_delhtContract({id:ids}).then((res) => {
        // console.log(res);
        if (res.status == 200) {
            ElNotification.success({ message: "删除成功" })
            location.reload()
        } else {
            ElNotification.success({ message: "删除失败" })
        }
    })

}
var shanchu = (id) => {

 
    serviceAxios.zyf.htxinx_delhtBankinfo({ id }).then((res) => {
        console.log(res);
        if (res.status == 200) {
            ElNotification.success({ message: "删除成功" })
            location.reload()
        } else {
            ElNotification.success({ message: "删除失败" })
        }
    })

}
</script>

<style scoped lang="scss">
.laonone {
    position: relative;

    .cell-item {
        width: 100px;
    }

    .trtitle {
        height: 60px;
        line-height: 60px;
        font-weight: bold;

    }

    .margin-tops {
        padding: 20px 0;
    }

    .my-content {
        width: 200px;
    }

    .cell-items {
        height: 100px;
    }

    .inputDeep {
        :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;

            .el-input__inner {
                cursor: default !important;
            }
        }
    }

    .xinjian {
        margin-left: 20px;
    }

    .zhanghu {
        display: flex;
        width: 97.8%;
        height: 40px;
        border: 1px solid #dde0e7;

        .xuhao {
            width: 60px;
            height: 100%;
            text-align: center;
            line-height: 40px;
        }

        .inputDeepe {
            width: 20%;

        }

        .inputDeeper {
            width: 32%;

        }
    }

    .xinjians {
        margin-left: 20px;

    }

    .kuang {
        padding: 30px;
        width: 400px;
        height: 40px;
        float: right;
        margin-right: 50px;
        display: flex;
        justify-content: space-between;

        .fanhui {
            width: 54px;
            height: 28px;
            border: 1px solid #dcdfe6;
            border-radius: 3px;

        }
    }
}
</style>
